<template >

  <div class="order_container">
    <div class="framwork">
      <h1>公示成绩</h1>
      <table
        class="tab_style"
        border="1"
        cellpadding="0"
        cellspacing="8"
      >
        <thead>
          <tr>
            <td
              v-for="item in tabel_head"
              :key="item"
            ><strong>{{item.msg}}</strong></td>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item,index) in tableData"
            :key="item"
          >
            <td v-if="index==0">
              <div class="medal_box">
                <el-icon
                  color="rgb(230,187,85)"
                  size="40px"
                >
                  <GoldMedal />
                </el-icon>
              </div>
            </td>
            <td v-else>No.{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.score}}</td>
          </tr>
        </tbody>
      </table>
      <el-button
        style="position:relative;bottom:-20px"
        type="danger"
        @click="exit"
      >退出</el-button>
    </div>
  </div>
</template>

  
  <script>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router';
import { reactive, toRefs } from 'vue-demi';
export default {
  name: "order",
  setup () {
    const store = useStore();
    const router = useRouter();
    const data = reactive({
      tabel_head: [
        {
          msg: "排名",
        },
        {
          msg: "队名"
        },
        {
          msg: "当前得分"
        }
      ],
      tableData: store.getters.getTableData,
    })
    const exit = () => {
      router.push('/')
    }
    return {
      ...toRefs(data),
      exit

    }
  }

}
  </script>
  
<style scoped>
table {
  border: 1px solid;
}
table th,
table td {
  border: 2px solid rgb(83, 138, 238);
  width: 250px;
  height: 52px;
}

.order_container {
  position: fixed;
  display: flex ;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: url(../../assets/bgr_2.png) no-repeat;
  background-size: 100%;
}

thead tr > td {
  background-color: rgb(83, 138, 238);
  color: white;
}
thead tr td:first-child,
tbody tr td:first-child {
  width: 150px;
}

.tab_style {
  border-radius: 10px;
  border: 5px solid rgba(103, 33, 168);
}
.medal_box {
  width: 198px;
  height: 45px;
  margin-top: 5px;
}
</style>